<template>
  <div class="hot-industry">
    <div
      class="industry-list collect-list"
      v-if="dataList.length"
      @scroll="handleScroll"
    >
      <template v-for="item in dataList" :key="item.id">
        <IndustryItem
          :item="item"
          :comType="'collect'"
          @cancelCollect="cancelCollect"
        ></IndustryItem>
      </template>
      <van-loading
        v-if="loading && !finished"
        type="spinner"
        color="#0b6eff"
        size="36px"
      />
    </div>
    <div class="empty-container" v-if="!dataList.length && finished">
      <NotData :text="'暂无收藏产业'" />
    </div>
  </div>
</template>
<script setup>
import { onActivated, ref } from 'vue';
import hotIndustryData from '@/utils/hotIndustry.json';
import { getFollowIndustryReq } from '@/api/industryMap.js';
import antiShake from '@/utils/antiShake.js'; // 引入防抖函数

import NotData from '@/views/industryMap/components/NotData.vue';
import IndustryItem from '@/views/industryMap/industryHome/components/IndustryItem.vue';

const pageNo = ref(1);
const pageSize = ref(16);
const dataList = ref([]);
const finished = ref(false);
const loading = ref(false);

const getDataList = async () => {
  loading.value = true;
  const params = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  };
  const res = await getFollowIndustryReq(params);
  if (res.code === 200) {
    const data = res.data || [];
    data.forEach((item) => {
      item.isCollect = true;
    });
    pageNo.value++;
    dataList.value = [...dataList.value, ...data];
    finished.value = dataList.value.length >= res.total || !data.length;
  } else {
    finished.value = false;
  }
  loading.value = false;
};

const cancelCollect = (item) => {
  dataList.value = dataList.value.filter((i) => i.id !== item.id);
};

const handleScroll = antiShake(() => {
  const listElement = document.querySelector('.collect-list');
  if (listElement) {
    const { scrollTop, scrollHeight, clientHeight } = listElement;
    if (scrollTop + clientHeight >= scrollHeight - 20 && !finished.value) {
      getDataList();
    }
  }
}, 300);

const reset = () => {
  pageNo.value = 1;
  dataList.value = [];
  finished.value = false;
};

onActivated(() => {
  reset();
  getDataList();
});
</script>
<style lang="scss" scoped>
.hot-industry {
  height: 100%;
  padding: 0 60px 32px;
}
.industry-list {
  height: 100%;
  padding: 52px 57px;
  background: #eff9ff;
  border-radius: 38px;
  overflow: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 209px 209px 209px;
  grid-gap: 32px 22px;
  box-sizing: border-box;
  .industry-item {
    height: 209px;
  }
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty-container {
  height: 100%;
  background: #ffffff;
  border-radius: 38px;
}
.van-loading {
  grid-column-start: span 4;
  text-align: center;
}
</style>
<style lang="scss">
.van-toast--text,
.van-toast--html {
  padding: 20px 24px !important;
}
</style>
